<template>
	<view>
		<view class="margin-sm" style="padding-bottom: 140rpx;">
			<view class="maoboli radius  margin-top-sm padding-sm">
				<!-- 门店 -->
				<view>
					<view class="font-title " v-if="currentShop!=null">
						{{currentShop.orgName}}
						<view class="iconfont icon-right"></view>
					</view>
					<view class="font-content font-12" v-if="currentShop!=null">
						{{currentShop.address}}
					</view>
				</view>
				<!-- 选择日期 -->
				<view class="container margin-top-sm">
					<view v-for="(item,index) in dataList" @click="selectDate(index)">
						<view
							:class="{'view-item xuanze radius  font-content padding-sm':true,'bg-pink shadow font-title':from.dateIndex==index}">
							<view class="juzhong ">{{item.dateShow.substring(2)}}</view>
							<view class="font-11  juzhong ">{{item.weekDay}}</view>
						</view>
					</view>
				</view>


				<!-- 选择时间 -->
				<view class="container margin-top-sm">
					<view v-for="(item,index) in timeH" @click="selectTime(index)">
						<view
							:class="{'view-item xuanze radius font-content ':true,'bg-pink shadow font-title':from.timeIndex==index}"
							style="padding:10rpx 20rpx;">
							<view class="juzhong">{{item.h}}小时</view>
						</view>
					</view>
					<view :class="{'view-item radius  juzhong ':true,'bg-pink':from.timeIndex==99}"
						@click="selectTime(99)" style="padding:0px 10rpx;">
						<input placeholder="自定义" type="number" style="font-size: 14px;" />
					</view>
				</view>
			</view>
			<!-- 公告 -->
			<view class="radius margin-top-sm">
				<view>
					<uni-notice-bar single show-icon text="营业时间24小时"></uni-notice-bar>
				</view>
			</view>
			<!-- 房间列表 -->
			<view v-for="item in list">
				<roomMJ :data="item" :tileNodeList="tileNodeList" @select="openyuyue" @showImg="previewImage"></roomMJ>
			</view>
			<guaguaLxianxi></guaguaLxianxi>
		</view>
		<!-- <Tabbar :pageIndex="1"></Tabbar> -->
		<yuyue ref="yuyueRef"></yuyue>
	</view>
</template>

<script>
	import {
		getDeviceList
	} from "@/api/shop/device/SysShopDeviceManagementApi"
	import {
		generateDateList,
		compareDates,
		formatDate,
		isNull
	} from "@/utils/validate.js"
	export default {
		data() {
			return {
				dataList: [],
				tileNodeList: [],
				//当前选择日期
				from: {
					date: null,
					dateIndex: 0,
					timeIndex: 0,
				},

				queryData: {
					date: null,
				},

				currentShop: null,
				timeH: [{
						h: 4
					},
					{
						h: 5
					},
					{
						h: 3
					},
				],
				list: []
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.init()
			uni.stopPullDownRefresh()
		},
		created() {


		},
		onShow() {
			this.init()
		},
		methods: {


			init() {
				this.dataList = generateDateList()
				//获取缓存中的门店信息
				this.currentShop = this.$storage.getItem("currentShop")
				this.getHoursFromNow()
				//获取现在的日期
				this.from.date = this.dataList[this.from.dateIndex].date
				this.getDeviceList()

			},


			/**
			 * 组装 24小时数组
			 */
			getHoursFromNow() {
				let now = new Date();
				let hoursFrom21 = now.getHours(); // 获取当前小时数
				let hours = [];

				//如果所选日期不是今天 那时间段就是24小时
				if (compareDates(this.from.date, formatDate(new Date())) != 0) {
					hoursFrom21 = 0
				}
				for (let i = hoursFrom21; i < hoursFrom21 + 24; i++) {
					// 将小时数添加到数组中，如果超过24小时，则从0开始
					let a = i % 24
					if (a == 0) {
						// a = '次'
					}
					hours.push(a);
				}

				this.tileNodeList = hours;
			},

			async getDeviceList() {
				if (isNull(this.currentShop) || isNull(this.currentShop.id)) {
					uni.showModal({
						title: '请先选择门店',
						content: '请先前往首页 选择门店',
					})
					return
				}
				this.queryData.orgIds = this.currentShop.id
				this.queryData.date = this.from.date
				this.getHoursFromNow()
				let {
					data
				} = await getDeviceList(this.queryData)

				for (let s of data) {
					s.images = s.images.split(',')
					s.tag = s.tag.split(',')
					s.date = this.from.date
					s.priceInfo = [{
								hour: 1,
								price: 15
							},
							{
								hour: 4,
								price: 50
							},
							{
								hour: 5,
								price: 60
							},
						],
						console.log(s);
				}
				this.list = data
			},
			openyuyue(data) {
				if (this.from.timeIndex != null) {
					data.hourNumber = this.timeH[this.from.timeIndex].h
				}

				this.$refs.yuyueRef.open(data)
			},
			selectDate(i) {
				this.from.dateIndex = i
				this.from.date = this.dataList[this.from.dateIndex].date
				this.getDeviceList()
			},
			selectTime(i) {
				this.from.timeIndex = i

				this.getDeviceList()
			},
			previewImage(imgList) {
				// 使用uni.previewImage进行图片预览
				console.log(imgList);
				uni.previewImage({
					current: imgList[0], // 当前显示的图片链接
					urls: imgList, // 需要预览的图片链接列表
					indicator: 'number'
				});
			}
		}
	}
</script>

<style>
	.xuanze {
		border: 1px so
	}

	.container {
		display: flex;
		overflow-x: auto;
		/* 当内容超出容器宽度时，允许水平滚动 */
		white-space: nowrap;
		/* 防止内容换行 */
	}

	.div-item {
		display: inline-block;
		/* 使 div 元素并排显示 */
		margin-right: 10px;
		/* 添加一些间隔 */
	}

	.container {
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: thin;
		/* 设置滚动条的宽度 */
		scrollbar-color: $uni-color-primary lightblue;
		/* 设置滚动条的轨道和滑块颜色 */
	}

	/* Webkit 浏览器特定的样式 */
	.container::-webkit-scrollbar {
		width: 8px;
		/* 设置滚动条的宽度 */
	}

	.container::-webkit-scrollbar-track {
		background: lightblue;
		/* 设置滚动条轨道的颜色 */
	}

	.container::-webkit-scrollbar-thumb {
		background-color: $uni-color-primary;
		/* 设置滚动条滑块的颜色 */
		border-radius: 4px;
		/* 设置滚动条滑块的圆角 */
	}
</style>